<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2024-02-27 12:04:26
 * @LastEditors: htang
 * @LastEditTime: 2024-03-04 09:46:58
-->
<template>
  <div class="flex index-card">
    <AMap />
    <div class="data-reports pl-4 flex flex-wrap">
      <div class="reports">
        <AlarmEcharts />
      </div>
      <div class="reports">
        <RepairRecordEcharts />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import AMap from '../components/AMap.vue';
import AlarmEcharts from '../components/AlarmEcharts.vue';
import RepairRecordEcharts from '../components/RepairRecordEcharts.vue';

const loading = ref(true);
</script>

<style lang="less" scoped>
.index-card {
  height: 55vh;
  .pl-4 {
    overflow: hidden;
  }
  .data-reports {
    width: 450px;
    .reports {
      position: relative;
      width: 100%;
      // background: #fff;
      // &::before {
      //   content: '';
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 44px;
      //   padding: 0 0 0 44.3px;
      //   background: url('@/assets/images/img-13.png') no-repeat;
      //   background-size: 100% 100%;
      //   color: #fff;
      //   line-height: 44px;
      // }
      // &:first-child {
      //   height: calc(55% - 18px);
      //   margin: 0 0 18px 0;
      //   &::before {
      //     content: '报警统计(柱状图)';
      //   }
      // }
      // &:last-child {
      //   height: 45%;
      //   &::before {
      //     content: '检修记录(实心饼图)';
      //   }
      // }
    }
  }
}
</style>